<template>
    <div class="main">
        <div class="about-container">
            <div class="head-img head-img-contain">
                <el-avatar :size="200" style="box-shadow: 1px 1px 100px darkblue;"
                    src="https://tse2-mm.cn.bing.net/th/id/OIP-C.NUx-VQGjYauE_CdDyT1eCwHaHa?rs=1&pid=ImgDetMain" />
                    
                <div>
                    <h1 style="margin-top: 2rem;">菜鸟拯救世界</h1>

                </div>
                <p style="margin-top: 2rem;">努力学习后端知识ing......</p>

                <div class="contain-icon">
                    <el-dropdown :hide-on-click="false">
                        <span>
                        <div class="alibaba-ico icon-wechat">
                            <svg t="1732080909288" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="1521" width="200" height="200">
                                <path
                                    d="M183.379592 699.559184c-4.179592 0-8.359184-1.044898-11.493878-3.657143-6.269388-4.702041-9.404082-12.016327-7.836734-19.330612l13.061224-77.322449C136.881633 553.273469 114.938776 496.326531 114.938776 437.289796 114.938776 292.571429 246.073469 175.020408 408.032653 175.020408c76.8 0 149.420408 26.644898 204.8 74.710204 55.379592 48.587755 86.726531 113.893878 88.293878 183.379592 0 5.746939-2.089796 10.971429-6.269388 14.628572s-9.404082 5.746939-15.151021 5.746938c-5.22449-0.522449-9.404082-0.522449-13.583673-0.522449-112.326531 0-203.232653 79.934694-203.232653 178.677551 0 13.583673 1.567347 27.167347 5.22449 40.751021 1.567347 5.746939 0.522449 11.493878-2.612245 16.195918-3.134694 4.702041-8.359184 7.836735-14.106123 8.881633-14.106122 2.089796-28.734694 3.134694-43.363265 3.134694-52.767347 0-104.489796-12.538776-149.420408-36.571429l-65.828572 34.481633c-3.134694 0-6.269388 1.044898-9.404081 1.044898z"
                                    fill="#0B9682" p-id="1522"></path>
                                <path
                                    d="M303.542857 352.653061m-35.004081 0a35.004082 35.004082 0 1 0 70.008163 0 35.004082 35.004082 0 1 0-70.008163 0Z"
                                    fill="#DCFFFA" p-id="1523"></path>
                                <path
                                    d="M512 352.653061m-35.004082 0a35.004082 35.004082 0 1 0 70.008164 0 35.004082 35.004082 0 1 0-70.008164 0Z"
                                    fill="#DCFFFA" p-id="1524"></path>
                                <path
                                    d="M849.502041 849.502041c-3.134694 0-6.269388-0.522449-9.404082-2.089796l-52.244898-27.167347c-37.093878 19.330612-78.889796 29.779592-122.253061 29.779592-134.269388 0-242.938776-98.220408-242.938776-218.383674S531.853061 412.734694 665.6 412.734694 909.061224 510.955102 909.061224 631.118367c0 48.065306-17.763265 95.085714-50.677551 133.22449l10.44898 61.64898c1.044898 7.314286-1.567347 15.15102-7.836735 19.330612-3.134694 3.134694-7.314286 4.179592-11.493877 4.179592z"
                                    fill="#16C4AF" p-id="1525"></path>
                                <path
                                    d="M576.261224 575.738776m-29.779591 0a29.779592 29.779592 0 1 0 59.559183 0 29.779592 29.779592 0 1 0-59.559183 0Z"
                                    fill="#DCFFFA" p-id="1526"></path>
                                <path
                                    d="M755.461224 575.738776m-29.779591 0a29.779592 29.779592 0 1 0 59.559183 0 29.779592 29.779592 0 1 0-59.559183 0Z"
                                    fill="#DCFFFA" p-id="1527"></path>
                            </svg>
                        </div>
                    </span>
                        <template #dropdown>
                            <!-- <el-dropdown-menu> -->
                                <img src="/public/image/wechat.jpg" style="
                                height: auto;width: auto; max-width: 20rem;max-height: 40%;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                ">
                            <!-- </el-dropdown-menu> -->
                        </template>
                    </el-dropdown>


                    <a class="alibaba-ico icon-github" href="http://baidu.com">
                        <svg t="1732081790753" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="2486" width="200" height="200">
                            <path
                                d="M512 0C229.283787 0 0.142041 234.942803 0.142041 524.867683c0 231.829001 146.647305 428.553077 350.068189 497.952484 25.592898 4.819996 34.976961-11.38884 34.976961-25.294314 0-12.45521-0.469203-45.470049-0.725133-89.276559-142.381822 31.735193-172.453477-70.380469-172.453477-70.380469-23.246882-60.569859-56.816233-76.693384-56.816234-76.693385-46.493765-32.58829 3.540351-31.948468 3.540351-31.948467 51.356415 3.71097 78.356923 54.086324 78.356923 54.086324 45.683323 80.19108 119.817417 57.072162 148.993321 43.593236 4.649376-33.91059 17.915029-57.029508 32.50298-70.167195-113.675122-13.222997-233.151301-58.223843-233.1513-259.341366 0-57.285437 19.919806-104.163095 52.678715-140.846248-5.246544-13.265652-22.820334-66.626844 4.990615-138.884127 0 0 42.996069-14.076094 140.760939 53.787741 40.863327-11.644769 84.627183-17.445825 128.177764-17.6591 43.465272 0.213274 87.271782 6.014331 128.135109 17.6591 97.679561-67.906489 140.59032-53.787741 140.59032-53.787741 27.938914 72.257282 10.407779 125.618474 5.118579 138.884127 32.844219 36.683154 52.593405 83.560812 52.593405 140.846248 0 201.586726-119.646798 245.990404-233.663158 258.957473 18.341577 16.208835 34.721032 48.199958 34.721032 97.210357 0 70.167195-0.639822 126.7275-0.639823 143.960051 0 14.033439 9.213443 30.370239 35.190235 25.209005 203.250265-69.527373 349.769606-266.123484 349.769605-497.867175C1023.857959 234.942803 794.673558 0 512 0"
                                fill="#3E75C3" p-id="2487"></path>
                        </svg>
                    </a>
                </div>

                <!-- 分类要写的内容 -->
                 <div class="about-content">
                    <hr>
                    <h1>IDEA vscode </h1>
                    <br><br>
                    
                    <hr>
                    <h1>c java python js</h1>   
                    <br><br>
                    
                    <hr>
                    <h1>vue3 spring</h1>


                 </div>


            </div>

        </div>
    </div>

</template>

<script setup lang="ts">

</script>

<style scoped>
.about-content {
    margin-top: 2%;
}

/* 头像的img */
.head-img {
    margin-top: 10%;
}

.head-img-contain {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.about-container {
    background-color: rgb(237, 237, 240);
    height: 100%;
}

/* 图标容器的布局 */
.contain-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
}

/* 微信图标 */
.icon-wechat {
    /* margin-left: 0rem; */
}
.icon-github {
    margin-left: 2rem;
}


</style>